<template>
  <div>
    <div class="agent">
      <el-row class="title"> 金牌经纪，品质服务 </el-row>
      <el-row style="color: #fff" type="flex" justify="center"> 专业的经纪，为你服务 </el-row>
      <el-divider></el-divider>
      <div class="agentsContent">
        <el-card v-for="item in agentsList" :key="item.id" style="width: 270px" class="box-card">
          <el-row type="flex" justify="center" align="center">
            <el-avatar :size="150" :src="item.image"></el-avatar>
          </el-row>
          <div class="info">
            <span style="fontsize: 25px">{{ item.name }}</span>
            <i class="icon-dianhua">电话：{{ item.phone }}</i>
            <i class="icon-youxiang">邮箱：{{ item.email }}</i>
            <i class="icon-dizhi">地址：{{ item.address }}</i>
          </div>

          <el-row type="flex" justify="center">
            <el-popover
              placement="bottom"
              title="介绍"
              width="200"
              trigger="hover"
              :content="item.desc"
            >
              <el-button slot="reference" style="margintop: 8px">具体介绍</el-button>
            </el-popover>
          </el-row>
        </el-card>
      </div>
    </div>
    <bottomBar></bottomBar>
  </div>
</template>
<script>
import bottomBar from '@/components/bottomBar.vue'
import NavBar from '@/components/navBar.vue'
import { getAgentsList } from '@/api/agents'
export default {
  components: { bottomBar, NavBar },
  data() {
    return {
      circleUrl: '',
      iconColor: '#fff',
      agentsList: []
    }
  },
  async created() {
    const res = await getAgentsList()
    this.agentsList = res.data
  },
  methods: {}
}
</script>
<style scoped lang="scss">
.agent {
  background: url('../../assets/img/bg.jpg');
  padding-top: 100px;
  height: 570px;
  .title {
    padding: 20px 0;
    font-size: 30px;
    color: #fff;
    text-align: center;
  }
  .agentsContent {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    .box-card {
      background-color: #2529377c;
      height: 363px;
      border: none;
      margin-bottom: 40px;
      .info {
        color: #fff;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        height: 110px;
        justify-content: space-evenly;
      }
    }
    .box-card:hover {
      background-color: rgba(255, 255, 255, 0.567);
      .info {
        color: #333;
      }
    }
    .el-avatar img {
      height: 150px;
      width: 150px;
    }
  }
}
</style>
